<ul>
  <span>
   <li>
   <li>
</ul>
<script>
	/* 事件冒泡与事件委托

1) 事件冒泡的流程
- 基于DOM树形结构
- 事件在目标元素上处理后, 会由内向外(上)逐层传递
- 应用场景: 事件代理/委托/委派

2) 事件委托
- 减少内存占用(减少了回调函数的生成)
- 动态添加的内部元素也能响应
- 不要滥用
   */

	//  封装一个绑带事件监听的函数(有难度)
	/*
绑定事件监听的通用函数(不带委托)
*/
	function bindEvent1(ele, type, fn) {
		ele.addEventListener(type, fn);
	}

	/*
绑定事件监听的通用函数(带委托)
*/
	function bindEvent2(ele, type, fn, selector) {
		ele.addEventListener(type, (event) => {
			const target = event.target;
			if (selector) {
				if (target.matches(selector)) {
					fn.call(target, event);
          console.log('如果这么做this不对,this会变成window,所以必须使用call强行指定this');
					//fn();如果这么做this不对,this会变成window,所以必须使用call强行指定this
				}
			} else {
				fn.call(ele, event);
			}
		});
	}
  const ul=document.querySelector('ul')
	bindEvent2(ul, "click", (event) => {}, "li");
	bindEvent1(ul, "click", (event) => {});
</script>
